1. react 是facebook开源的一个前端框架

是一个用于构建用户界面的js库

特点: 
    1. 声明式 jsx
    2. 组件化(封装)
    3. 一次学习,多平台编写(react和react-native写原生app. react和react-dom写网页)

react版本: 17.0.2 

react-dom 版本的区别: 

17.0.2:  
    import ReactDOM from 'react-dom' 
    ReactDOM.render(react元素, 真实dom节点)

18.1.0 
    import ReactDOM from 'react-dom/client'
    const root = ReactDOM.createRoot(真实dom的根标签)
    root.render(react元素)

react的基本使用: 

1. 根标签
2. 引入react,react-dom,需要babel编译我们的jsx 
3. 编写代码
4. 利用ReactDOM渲染页面


jsx写的时候,有什么要注意的问题: 

    1. 一段jsx必须要有一个根标签 
    2. jsx注释: {/* */}

jsx动态插入数据: 

    1. 插值表达式写在哪里 

        写在标签的子节点, 为了渲染数据

        不能渲染普通对象. 普通对象不属于react元素,所以不能渲染
        不能渲染函数,不是react元素,会警告
        不能渲染布尔值,undefined,null 不会渲染出来

        写在标签的属性的值的位置, 为了控制属性的值

        className 

    2. 插值表达式里面可以写什么

        可以直接写表达式 

jsx 列表渲染

    const arr = [1,2,3,4,5,5,6]
    const ul = <ul>
        {arr.map(item=>{
           return <li key={item}>{item}</li>
        })}
    </ul>

// jsx注册事件


//     <div onMouseEnter={function(e){
//         // this ==> undefined 
//         原因: 1. 当前函数其实内部是apply调用,也没有指定this.所以应该指向window
//         2. 因为代码被babel编译,开启了严格模式,所以this指向undefined

//         // e.target
//         e.preventDefault()
//     }}>123</div>

create-react-app 

npm i create-react-app -g 


create-react-app 项目名称

public 静态资源 

至少有一个index.html 

index.html中应该有一个根标签

src 
至少有一个入口文件 index.js



